<template>
  <div class="star" :class="starType">
        <span v-for=" (itemClass,index) in 	itemClasses " :class="itemClass" class="star-item"  :key="index" ></span>
  </div>
</template>

<script>
  const LENGTH = 5;
  const CLS_ON = 'on';//全星
  const CLS_HALF = 'half';//半星
  const CLS_OFF = 'off';//灰星

export default {
  name: 'star',
  props:{
  	  size:{ //尺寸
  	  	type:Number
  	  },
  	  score:{//分数
  	  	type:Number
  	  }
  },
  computed:{
  	starType(){ //拼接一个css名字
  		return 'star-'+this.size
		},
    itemClasses() {
        let result = [];//定义一个数组  向下取整星星
        let score = Math.floor(this.score * 2) / 2; 
        let hasDecimal = score % 1 !== 0;//判断是否有半星
        let integer = Math.floor(score); //向下取整全星数量
        for (let i = 0; i < integer; i++) {//循环添加全新数量
          result.push(CLS_ON);
        }
        if (hasDecimal) {//添加半星
          result.push(CLS_HALF);
        }
        while (result.length < LENGTH) {//添加灰星
          result.push(CLS_OFF);
        }
        return result;//返回一个新的数组
    }
	}
	,
  watch:{
    	'size'(to,form){
// 		console.log(this.size)
   	},
	   	'score'(to,form){
// 		console.log(this.score)
   	}
  }

}
</script>

<!--<style>
	div{text-align: center;}
</style>-->
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less"  scoped>
       @import "../../common/stylus/border.css";
       @import "../../common/stylus/url.less";
       @import "../../common/stylus/icon.less";
	.star{
		font-size: 0;
		text-align: center;
		.star-item{
			display: inline-block;
			background-repeat: no-repeat;
		}
		&.star-48{
			.star-item{
				width: 20px;
				height: 20px;
				margin-right: 22px;
				background-size: 20px 20px;
			 &:last-child{margin-right: 0;}
			 &.on{background-image: url(img/star48_on@2x.png);}
       &.half{background-image: url(img/star48_half@2x.png);}
       &.off{background-image: url(img/star48_off@2x.png);}
			}
		}
		&.star-36{
			.star-item{
				width: 15px;
				height: 15px;
				margin-right: 6px;
				background-size: 15px 15px;
			 &:last-child{margin-right: 0;}
			 &.on{background-image: url(img/star36_on@2x.png);}
       &.half{background-image: url(img/star36_half@2x.png);}
       &.off{background-image: url(img/star36_off@2x.png);}
			}
		}
		&.star-24{
			.star-item{
				width: 10px;
		    height: 10px;
		    margin-right: 3px;
		    background-size: 10px 10px;
			 &:last-child{margin-right: 0;}
			 &.on{background-image: url(img/star24_on@2x.png);}
       &.half{background-image: url(img/star24_half@2x.png);}
       &.off{background-image: url(img/star24_off@2x.png);}
			}
		}
		  
	   }

       





</style>
